<?php

use app\assets\BackendAsset as Asset;
use app\models\tableModel\AdminRoleModel;

/* @var $this yii\web\View */
/* @var $model app\models\tableModel\SettingModel */
/* @var $form yii\widgets\ActiveForm */

?>
<el-main class="content-wrapper no-pl no-pr no-border bg-gray">
    <el-form :model="form" :rules="formRules" ref="ruleForm" label-width="140px"
             class="form-400" label-position="left" :validate-on-rule-change="false">

        <el-card shadow="hover">
            <el-form-item label="字段键" prop="key" class="form-item" :inline-message="true"
                          :error="customErrMsg.key" ref="formItem_key">

                <el-input v-model="form.key" size="small" class="form-element"
                          placeholder="请输入字段键值">
                </el-input>

            </el-form-item>

            <el-form-item label="字段标题" prop="title" class="form-item" :inline-message="true"
                          :error="customErrMsg.title" ref="formItem_title">

                <el-input v-model="form.title" size="small" class="form-element"
                          placeholder="请输入字段标题">
                </el-input>

            </el-form-item>
        </el-card>

        <el-card shadow="hover">
            <el-form-item label="字段类型" prop="type" class="form-item" :inline-message="true"
                          :error="customErrMsg.type" ref="formItem_type">

                <el-select v-model="form.type" placeholder="请选择" size="small" @change="changeType" class="form-item">
                    <el-option v-for="item in setting.type_list" :label="item.text" :value="item.value">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item label="字段值" prop="value" class="form-item" :inline-message="true"
                          :error="customErrMsg.value" ref="formItem_value" v-if="settingOver">

                <div v-if="localType === 'html'">
                    <?= $this->render('../common/html-editor.php', [
                        'height'   => '400',
                        'scenario' => 'settingImage',
                        'code'     => 'form.value',
                    ]) ?>
                </div>

                <div v-else-if="localType === 'image'">
                    <?= $this->render('../common/uploader.php', [
                        'column'   => 'form.value',
                        'scenario' => 'settingImage',
                        'ref'      => 'uploader_form_value_image'
                    ]) ?>
                </div>

                <div v-else-if="localType === 'excel'">
                    <?= $this->render('../common/uploader.php', [
                        'column'    => 'form.value',
                        'scenario'  => 'settingExcel',
                        'ref'      => 'uploader_form_value_excel',
                        'fileTypes' => [
                            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                            'application/vnd.ms-excel'
                        ]
                    ]) ?>
                </div>

                <el-card v-else-if="form.type === setting.type_list.json.value"
                         class="box-card form-element">
                    <div slot="header" class="clearfix">
                        <div class="font-second">
                            <el-row :gutter="20">
                                <el-col :span="18">
                                    &nbsp;
                                </el-col>
                                <el-col :span="6" align="center">
                                    <el-button type="text" @click="addRowValue('value')"
                                               v-if="isCanAddRow || $w.isEmpty(form.value)">
                                        添加一条
                                    </el-button>
                                    <div v-else class="display-inline ml-30 mr-30">
                                        &nbsp;
                                    </div>
                                    <el-button type="text" class="text-danger"
                                               @click="cleanAll('value')">
                                        清空
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="header-content">
                        <el-row v-for="(vItem, vKey, vIndex) in form.value" class="input-group">
                            <el-col :span="getJsonSpan()" v-for="(oItem, oKey) in form.option"
                                    class="value-item">
                                <div :class="getJsonClass(vItem, oKey)"
                                     class="display-inline json-input">
                                    <el-input placeholder="请输入值" class="form-element"
                                              v-model="vItem[oItem.key]" size="small">
                                        <template slot="prepend">
                                            {{oItem.text}}
                                        </template>
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :span="3" align="center" class="button-append">
                                <el-button type="text text-danger" size="small"
                                           @click="delRowValue(vKey, 'value')">
                                    删除
                                </el-button>
                            </el-col>
                        </el-row>
                        <div v-if="$w.isEmpty(form.value)">
                            <el-empty :image-size="100" description="暂无内容，请添加"></el-empty>
                        </div>
                    </div>
                </el-card>

                <el-input v-else type="textarea" show-word-limit
                          v-model="form.value" class="form-element"
                          :autosize="{minRows: 6}" placeholder="请输入字段值"
                          :maxlength="form.length == 0 ? 2000 : form.length">
                </el-input>

            </el-form-item>

            <el-form-item label="是否可添加条目" prop="can_add_row" class="form-item"
                          :error="customErrMsg.can_add_row" :inline-message="true"
                          ref="formItem_is_can_add_row" v-if="localType === 'addRow'">

                <el-radio-group v-model.number="form.can_add_row" size="mini" class="form-element"
                                @change="$forceUpdate()">

                    <el-radio v-for="item in setting.can_add_row_list" :label="item.value">
                        {{item.text}}
                    </el-radio>

                </el-radio-group>

            </el-form-item>

            <el-form-item label="字段选项" prop="option" class="form-item" :error="customErrMsg.option"
                          v-if="$w.in_array(localType, ['addRow']) && settingOver"
                          :inline-message="true" ref="formItem_option">

                <el-card v-if="form.type === setting.type_list.json.value"
                         class="box-card form-element">
                    <div slot="header" class="clearfix">
                        <div class="font-second">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    键
                                </el-col>
                                <el-col :span="12">
                                    文本
                                </el-col>
                                <el-col :span="6" align="center">
                                    <el-button type="text" @click="addRowValue('option')">
                                        添加一条
                                    </el-button>
                                    <el-button type="text" class="text-danger"
                                               @click="cleanAll('option')">
                                        清空
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="header-content">
                        <el-row :gutter="20" v-for="(item, key) in form.option" :key="key">
                            <el-col :span="6">
                                <el-input v-model="item.key" size="small" class="form-element"
                                          placeholder="请输入键">
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model="item.text" size="small" class="form-element"
                                          placeholder="请输入文本">
                                </el-input>
                            </el-col>
                            <el-col :span="6" align="center" class="button-append">
                                <el-button type="text" size="small" @click="upRowValue(key, 'option')">
                                    上移
                                </el-button>
                                <el-button type="text" @click="downRowValue(key, 'option')"
                                           size="small">
                                    下移
                                </el-button>
                                <el-button type="text text-danger" size="small"
                                           @click="delRowValue(key, 'option')">
                                    删除
                                </el-button>
                            </el-col>
                        </el-row>
                        <div v-if="$w.isEmpty(form.option)">
                            <el-empty :image-size="100" description="暂无内容，请添加"></el-empty>
                        </div>
                    </div>
                </el-card>
                <el-card v-else class="box-card form-element">
                    <div slot="header" class="clearfix">
                        <div class="font-second">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    值
                                </el-col>
                                <el-col :span="12">
                                    文本
                                </el-col>
                                <el-col :span="6" align="center">
                                    <el-button type="text" @click="addRowValue('option')">
                                        添加一条
                                    </el-button>
                                    <el-button type="text" class="text-danger"
                                               @click="cleanAll('option')">
                                        清空
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="header-content">
                        <el-row :gutter="20" v-for="(item, key) in form.option" :key="key">
                            <el-col :span="6">
                                <el-input v-model="item.value" size="small" class="form-element"
                                          placeholder="请输入值">
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model="item.text" size="small" class="form-element"
                                          placeholder="请输入文本">
                                </el-input>
                            </el-col>
                            <el-col :span="6" align="center">
                                <el-button type="text" size="small"
                                           @click="upRowValue(key, 'option')">
                                    上移
                                </el-button>
                                <el-button type="text" size="small"
                                           @click="downRowValue(key, 'option')">
                                    下移
                                </el-button>
                                <el-button type="text text-danger" size="small"
                                           @click="delRowValue(key, 'option')">
                                    删除
                                </el-button>
                            </el-col>
                        </el-row>
                        <div v-if="$w.isEmpty(form.option)">
                            <el-empty :image-size="100" description="暂无字段值，请添加"></el-empty>
                        </div>
                    </div>
                </el-card>

                <div class="form-element-append display-block">
                    <span class="font-third"></span>
                </div>
            </el-form-item>
        </el-card>

        <el-card shadow="hover">
            <el-form-item label="所在分组" prop="group" class="form-item" :inline-message="true"
                          :error="customErrMsg.group" ref="formItem_group">

                <el-select v-model="form.group" placeholder="请选择" size="small" class="form-item">
                    <el-option v-for="item in setting.group_list" :label="item.text"
                               :value="item.value">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item label="状态" prop="status" class="form-item" :inline-message="true"
                          :error="customErrMsg.status" ref="formItem_status">

                <el-radio-group v-model="form.status" size="mini" class="form-element">
                    <el-radio v-for="item in setting.status_list" :label="item.value">
                        {{item.text}}
                    </el-radio>
                </el-radio-group>

            </el-form-item>

            <el-form-item label="排序" prop="sort" class="form-item" :inline-message="true"
                          :error="customErrMsg.sort" ref="formItem_sort">

                <el-input-number v-model="form.sort" :min="setting.min_sort" :max="setting.max_sort"
                                 label="请输入排序" size="small" style="width: 200px"></el-input-number>

            </el-form-item>

            <el-form-item label="单位" prop="unit" class="form-item" :inline-message="true"
                          :error="customErrMsg.unit" ref="formItem_unit" v-show="setting.type_list &&
                          form.type === setting.type_list.input.value">

                <el-input v-model="form.unit" size="small" class="form-element"
                          placeholder="请输入字段单位">
                </el-input>

                <div class="form-element-append-inline">
                    <el-tooltip class="item" effect="light" placement="top-start">
                        <div slot="content">
                            此字段填写之后将在文本框右侧出现字符，仅限文本框类型。
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是单位？
                        </span>
                        </div>
                    </el-tooltip>
                </div>

            </el-form-item>

            <el-form-item label="展示宽度" prop="width" class="form-item" :inline-message="true"
                          :error="customErrMsg.width" ref="formItem_width">

                <el-input v-model="form.width" size="small" class="form-element"
                          placeholder="请输入字段展示宽度">
                </el-input>

                <div class="form-element-append-inline" style="display: none">
                    <el-tooltip class="item" effect="light" placement="top-start">
                        <div slot="content">
                            此字段填写之后将在文本框右侧出现字符，仅限文本框类型。
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是单位？
                        </span>
                        </div>
                    </el-tooltip>
                </div>

            </el-form-item>
        </el-card>

        <el-card shadow="hover">
            <el-form-item label="是否必填" prop="is_required" class="form-item"
                          :inline-message="true" :error="customErrMsg.is_required"
                          ref="formItem_is_required">

                <el-radio-group v-model="form.is_required" size="mini" class="form-element">

                    <el-radio v-for="item in setting.is_required_list" :label="item.value">
                        {{item.text}}
                    </el-radio>

                </el-radio-group>

                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        一些字段说明
                    </span>
                </div>
            </el-form-item>
            <el-form-item label="字段长度" prop="length" class="form-item" :inline-message="true"
                          :error="customErrMsg.length" ref="formItem_length">

                <el-input v-model="form.length" size="small" class="form-element"
                          placeholder="请输入字段长度" type="number">
                </el-input>

                <div class="form-element-append lh-normal mt-5" style="display: none;">
                    <i class="el-icon-question font-second"></i>
                    <span class="font-third">
                        一些字段说明
                    </span>
                </div>
            </el-form-item>
            <el-form-item label="验证规则" prop="reg" class="form-item" :inline-message="false"
                          :error="customErrMsg.reg" ref="formItem_reg">

                <el-input v-model="form.reg" size="small" class="form-element"
                          placeholder="请输入验证规则">

                    <el-button slot="append" icon="el-icon-caret-right"
                               @click="execReg('')"></el-button>

                </el-input>

                <div class="form-element-append-inline">
                    <el-tooltip class="item" effect="light"
                                placement="top-start">
                        <div slot="content">
                            左侧输入框输入[<strong>正则表达式</strong>](如：/\d*/)，点击右侧运行按钮即可测试；
                            <br>
                            将在输入之后进行正则验证成功后才可提交，错误将提示[<strong>验证错误提示字段</strong>]内容
                        </div>
                        <div>
                            <i class="el-icon-question font-second pointer"></i>
                            <span class="font-third">
                            什么是验证规则？
                        </span>
                        </div>
                    </el-tooltip>
                </div>
            </el-form-item>
            <el-form-item label="验证错误提示" prop="hint" class="form-item" :inline-message="false"
                          :error="customErrMsg.hint" ref="formItem_hint">

                <el-input v-model="form.hint" size="small" class="form-element"
                          placeholder="请输入验证错误提示">

                </el-input>

            </el-form-item>
        </el-card>

        <el-card shadow="hover">

            <el-form-item label="顶部是否分割线" prop="top_line" class="form-item" :inline-message="true"
                          :error="customErrMsg.top_line" ref="formItem_top_line">

                <el-radio-group v-model="form.top_line" size="mini" class="form-element">
                    <el-radio v-for="item in setting.top_line_list" :label="item.value">
                        {{item.text}}
                    </el-radio>
                </el-radio-group>

            </el-form-item>

            <el-form-item label="分割线标题" prop="top_title" class="form-item" :inline-message="true"
                          :error="customErrMsg.top_title" ref="formItem_top_title"
                          v-show="settingOver && form.top_line==setting.top_line_list.yes.value">

                <el-input v-model="form.top_title" size="small" class="form-element"
                          placeholder="请输入分割线标题">
                </el-input>

            </el-form-item>

            <el-form-item label="说明" prop="description" class="form-item" :inline-message="true"
                          :error="customErrMsg.description" ref="formItem_description">

                <el-input type="textarea" placeholder="请输入说明" v-model="form.description"
                          class="form-element" maxlength="300" show-word-limit
                          :autosize="{minRows:6}">
                </el-input>

                <div class="form-element-append display-block lh-normal mt-5">
                    <span class="font-third">
                        字段说明将在普通模式字段值下面展示一段小说明，便于用户明白您的配置想用于什么地方，
                        可以做一些剪短的说明。
                    </span>
                </div>
            </el-form-item>
        </el-card>

    </el-form>
    <div class="form-bottom-free"></div>
</el-main>
<el-footer class="bottom-button" :height="50">
    <el-button size="mini" type="danger" @click="cancel" v-show="pageDialog.isIframe">
        取消
    </el-button>
    <?php if (AdminRoleModel::checkAuth('create')) { ?>
        <el-button size="mini" type="success" @click="submit" v-if="setting.isCreate === true">
            创建
        </el-button>
    <?php } ?>
    <?php if (AdminRoleModel::checkAuth('update')) { ?>
        <el-button size="mini" type="primary" @click="submit" v-if="setting.isCreate === false">
            保存
        </el-button>
    <?php } ?>
</el-footer>

<?php
Asset::addCss($this, '/css/backend/setting-form.css');
Asset::addScript($this, '/js/backend/setting-form.js');

$isCreate = !isset($isCreate) || !$isCreate ? 'false' : 'true'; // 是否新建
$this->registerJs('instance = new app(' . $isCreate . ');');
?>
